<template>
  <div class="user">
    <!-- 已登录 -->
    <template v-if="isLogin">
      <!-- 用户信息 -->
      <van-cell center class="member">
        <template #icon>
          <van-image :src="avatar" width="80px" round></van-image>
        </template>
        <template #title>
          <span class="title">{{ user.name }}</span>
        </template>
      </van-cell>
      <!-- 用户课操作功能列表 -->
      <van-cell v-for="(item, i) of cellItems" :key="i" :icon="item.img" :title="item.title" is-link
                :to="{name:item.name}"/>
      <van-cell @click="onClickLogout" icon="user-o" title="退出登录" is-link/>
    </template>
    <!-- 未登录 -->
    <template v-else>
      <!-- 用户信息 -->
      <van-cell center class="member" is-link to="login">
        <template #icon>
          <van-image :src="avatar_default" width="80px"></van-image>
        </template>
        <template #title>
          <span class="title">登录 / 注册</span>
        </template>
      </van-cell>
    </template>
  </div>
</template>

<script>
import {getStorageToken, getStorageUser, removeStorageToken} from "@/utils/storage.js"

export default {
  name: "user",
  data() {
    return {
      user: {},
      avatar_default: require("@/assets/images/avatar_default.png"),
      avatar: "",
      isLogin: false,
      cellItems: [{
        title: "我的订单",
        name: "orderList",
        img: "orders-o",
      },
        {
          title: "收货地址",
          name: "addressList",
          img: "envelop-o",
        },

        {
          title: "我的收藏",
          name: "working",
          img: "point-gift-o",
        },
        {
          title: "个人资料",
          name: "profile",
          img: "user-o",
        },
        {
          title: "修改密码",
          name: "updatePwd",
          img: "records",
        },
      ],
    };
  },

  //初始页面数据
  mounted() {
    this.user = getStorageUser();
    if (this.user && this.user.avatar) {
      this.avatar = this.$fullUrl(this.user.avatar);
    } else {
      this.avatar = this.avatar_default;
    }

    //判断是否用户登录，看Token是否为空
    let token = getStorageToken();
    this.isLogin = token ? true : false;
  },

  methods: {
    //点击用户退出事件
    onClickLogout() {
      removeStorageToken();
      this.avatar = this.avatar_default;
      this.$toast("退出成功");
      this.isLogin = false;
    },
  },
};
</script>

<style lang="less" scoped>
.member {
  padding: 10px;
  background: linear-gradient(90deg, #28a2ff, #ffd787);
  box-shadow: 0 0.1rem 0.25rem #f8e3c6;
}

.title {
  padding-left: 20px;
  font-size: 24px;
  color: rgb(65, 16, 241);
}
</style>
